<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        float: left;
    }

    .box2 {
        background-color: yellowgreen;
        float: left;
        /* 元素设置浮动后将从文档流中脱离， */
        /* 脱离后元素的特点也会发生变化 */

    }

    .box3 {
        background-color: orange;
    }

    /* 不浮动box2就会独占一行  */
    /* 脱离后不独占一行 宽度是内容的宽度 没内容  就没东西 */
    /* 脱离后 块元素的宽度和高度都被内容撑开 */
    .s1 {
        background-color: yellowgreen;
        width: 100px;
        height: 100px;
        /* span是一个行内元素 不支持 */
        /* 让span浮动后 宽高就会生效 */
        /* 行内元素脱离文档流就会变成块元素 性质一样 宽度 高度都被内容撑开 */
        /* 脱离文档流后 就不需要要区分 块元素和行内元素 */
        /* 并不是浮动独有的 只要元素脱离文档流 就会这样的效果 */
        /* 以后还可能有其他的脱离文档流的方法 */
    }
</style>

<body>
    <span class="s1">
        我是一个span
    </span>
    <div class="box2">hello

    </div>
    <div class="box3">hello</div>
</body>

</html>